<template>
  <div>
    <van-nav-bar title="还款计划" left-arrow @click-left="$router.back()">
      <div slot="right" class="allPlan" @click="allPlan">全部计划</div>
    </van-nav-bar>
    <div class="loanBox">
      <!-- <ab-scroller v-if="InstanceStatus" url="/plugin/mobileBusiCenter/contractList" :params="{status: '00'}">
        <div slot-scope="slotScope"> -->
        <gz-default-page v-if="!dataList || dataList.length <= 0" :imageSize="'14.8rem'" :textSize="'1.4rem'" :text="'暂无记录'"></gz-default-page>
        <div class="product_main">
          <div v-for="(apply,index) in dataList" :key="apply.id" v-if="Number(apply.currentPeriod) >= Number(period)">
            <!-- <router-link :to="{path:'/bpm/instanceDetail',query:{instanceId:apply.id,nodeId:'StartNoneEvent'}}"> -->
            <div class="loan-list-style">
              <div class="card-item">
                <div class="item-title">{{apply.currentPeriod}}/{{apply.periods}} 期 <span class="green" v-if="apply.status == '01'">已还</span><span class="red" v-if="apply.status != '01' && apply.currentPeriod == period">当期需还</span></div>
                <div class="item-value">{{ abTools.comdify(Number(Number(apply.capital) + Number(apply.interest)).toFixed(2)) }}元</div>
              </div>
              <div class="card-item principal">
                <div class="item-title">{{apply.repaymentTime}}</div>
                <div class="item-value"><span>本金{{ abTools.comdify(apply.capital) }}元</span>利息{{ abTools.comdify(apply.interest) }}元</div>
              </div>
            </div>
            <!-- </router-link> -->
          </div>
        </div>
        <!-- </div>
      </ab-scroller> -->
    </div>
    <div class="bottom_btn" @click="$router.back()">返回</div>
  </div>
</template>

<script>

import Vue from 'vue';
import {gzDefaultPage} from '@/components/customize'

export default {
  components: {gzDefaultPage},
  data: function () {
    return {
      InstanceStatus: null,
      dataList: [],
      searchParam: {
        id: this.$route.query.id
      },
      period:''
    }
  },
  created: function () {
    this.id = this.$route.query.id;
    this.period = this.$route.query.period;
    this.getScheduleList();
  },
  methods: {
    // 合同列表
    getScheduleList() {
      this.$toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true,
        message: '加载中...'
      });
      this.baseService.postForm(this.__ctx + '/plugin/mobileBusiCenter/getScheduleList', this.searchParam).then(res => {
        this.$toast.clear();
        if (res.isOk) {
          this.dataList = res.data;
        } else {
          this.$toast({
            icon: 'warning',
            message: res.msg
          });
        }
      }, function (status) {
        this.$toast.clear();
        if (status == !0) {
          this.$toast({
            icon: 'warning',
            message: '加载失败！' + status
          });
        }
      });
    },
    allPlan(){
      this.$router.push({path:'/loanPage/repaymentPlanAll', query: {id: this.id, period: this.period}});
    }
  }
}
</script>
<style scoped lang="less">
/deep/ ._v-container {
  top: 4.2rem !important;
  height: calc(~'100vh - 8.6rem') !important;
}

/deep/ .van-nav-bar {
  .van-nav-bar__content {
    height: 4.4rem;
    line-height: 2rem;

    .van-icon {
      color: rgb(50, 50, 51);
      font-size: 2rem;
    }

    .van-nav-bar__title {
      font-size: 1.8rem;
    }
  }
  .allPlan{
    color: var(--primary-color);
    font-size: 1.4rem;
  }
}

[class*=van-hairline]::after {
  border: 0;
}

/*列表样式start*/
.loanBox{
  overflow-y: auto;
  height: calc(~'100vh - 10.4rem');
}
.product_main {
  background-color: #FFF;
  border-radius: 1.2rem;
  padding: 0 1.6rem;
  margin: 1.2rem;
}

.loan-list-style {
  box-sizing: border-box;
  overflow: hidden;
  border-bottom: 1px solid rgba(229, 230, 235, 0.5);
  padding: 1.6rem 0;

  .card-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 2.2rem;
    color: rgb(29, 33, 41);
    font-size: 1.6rem;
    font-weight: 500;

    .item-title {
      span{
        font-size: 1.2rem;
        line-height: 1.4rem;
      }
      .red {
        color: rgb(245, 63, 63);
        background: rgba(245, 63, 63, 0.1);
        border-radius: 0.8rem 0.8rem 0.8rem 0;
        padding: 0.2rem 0.6rem;
        margin-left: 0.4rem;
      }

      .green {
        color: rgb(0, 180, 42);
        background: rgba(0, 180, 42, 0.1);
        border-radius: 0.8rem 0.8rem 0.8rem 0;
        padding: 0.2rem 0.6rem;
        margin-left: 0.4rem;
      }
    }

    .item-value {
      font-size: 1.8rem;
      .price {
        span {
          // font-size: 1.8rem;
          font-weight: 500;
        }

        &.active {
          color: var(--primary-color);
        }
      }
    }
    &.principal{
      color: rgba(29, 33, 41, 0.54);
      font-size: 1.4rem;
      font-weight: 400;
      margin-top: 0.6rem;
      .item-title {


      }

      .item-value {
      //   color: rgb(29, 33, 41);
        font-size: 1.4rem;
        span{
          margin-right: 1.2rem;
        }
      }
    }
  }
}
.bottom_btn{
  width: calc(~'100% - 2.4rem');
  height: 4.4rem;
  margin: 1.8rem 1.2rem;
  background: linear-gradient(270.00deg, var(--primary-color), var(--gradient2-color));
  border-radius: 4rem;
  color: rgb(255, 255, 255);
  font-family: HarmonyOS Sans SC;
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 4.4rem;
  letter-spacing: 0%;
  text-align: center;
  position: absolute;
  bottom: 0;
  left: 0;
}

/*列表样式end*/
</style>
